<template>
    <div class="datail">
        <el-row>
        <el-col :span="24">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.label" :name="item.name" v-for="item in tabsList" :key="item.name">
                <el-button type="success" @click="isShowDialog('insert','literature')" icon="el-icon-plus">新增</el-button>
                <div v-if="item.name==='9'">
                    <el-table :data="literatureList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"  :header-cell-style="getRowClass" :height="tableHeight" >
                        <el-table-column prop="code" label="文献编码" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                        <el-table-column prop="docName" label="文献名称" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                        <el-table-column prop="docType" label="文献类型" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
                        <el-table-column prop="publications" label="发表刊物" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
                        <el-table-column prop="publisher" label="发表人" show-overflow-tooltip	 sortable min-width="90" align="center"></el-table-column>
                        <el-table-column prop="position" label="发表人职位" show-overflow-tooltip min-width="90" align="center"></el-table-column>
                        <el-table-column prop="publishTime" label="发表时间" sortable min-width="120" align="center"></el-table-column>
                        <el-table-column prop="level" label="影响因子" show-overflow-tooltip sortable min-width="90" align="center"></el-table-column>
                        <el-table-column prop="creatorName" label=" 上传人" show-overflow-tooltip sortable  min-width="90" align="center"></el-table-column>
                        <el-table-column prop="createTime" label="上传时间" sortable min-width="120" align="center"></el-table-column>
                        <el-table-column fixed="right" label="操作"  align="center" min-width="120">
                            <template slot-scope="scope">
                                <el-button @click="literatureAddTag(scope.row)" type="text" size="small">标签</el-button>
                                <el-button @click="literatureDownload(scope.row)" type="text" size="small">下载</el-button>
                                <el-button @click="deleteDate('literature',scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                     </el-table>
                </div>
                <div v-else>
                    <el-table :data="abstractList" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;"  :header-cell-style="getRowClass" :height="tableHeight" >
                        <el-table-column fixed type="index" label="*" sortable min-width="40" align="center"></el-table-column>
                        <el-table-column prop="content" label="摘要内容" show-overflow-tooltip sortable align="center">
                        </el-table-column>
                        <el-table-column prop="createTime" label="上传时间" show-overflow-tooltip sortable min-width="120" align="center"></el-table-column>
                        <el-table-column prop="creatorName" label="上传人" show-overflow-tooltip sortable min-width="120" align="center"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                            <template slot-scope="scope">
                                <el-button @click="isShowDialog('update',scope.row)" type="text" size="small">修改</el-button>
                                <el-button @click="deleteDate('abstract',scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
            </el-tab-pane>
        </el-tabs>
        </el-col>
        </el-row>
        <el-dialog :title="dialog.title" width="70%" top="40px"  center :visible.sync="dialog.isShow" :close-on-click-modal="false" :modal="false">
             <div v-if="activeName==='9'">
                <literature :activeName="activeName" :literature="literatureContent" addType="insert" :id="detail.id" @addHandle="addLiterature"></literature>
            </div>
            <div v-else>
                <h3 class="dialog-plate-title"><span>摘要内容</span></h3>
                <div>
                    <div v-if="abstract.abstractType">
                        <div v-html="abstract.content"></div>
                        <el-row type="flex" justify="end" style="margin-top:16px;">
                            <el-button type="primary" @click="changeAbstractType">修改</el-button>
                        </el-row>
                    </div>
                    <div v-else>
                        <quill-editor v-model="abstract.content" style="padding-right: 10px;margin-left:10px;"></quill-editor>
                        <el-row type="flex" justify="end" style="margin-top:16px;">
                            <el-button type="primary" @click="addAbstractList">{{addType=='insert'?'添加':'修改'}}文献</el-button>
                        </el-row>
                    </div>
                </div>
                <h3 class="dialog-plate-title"><span>关联文献</span></h3>
                <el-button type="success"  icon="el-icon-plus" @click="isShowDialog1('insert')">新增</el-button>
                <el-table :data="abstract.literatureList" :header-cell-style="getRowClass" height="500px">
                        <el-table-column prop="code" label="文献编码" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
                        <el-table-column prop="docName" show-overflow-tooltip label="文献名称" width="180"></el-table-column>
                        <el-table-column prop="docType" label="文献类型" width="180"></el-table-column>
                        <el-table-column prop="publications" label="发表刊物" width="180"></el-table-column>
                        <el-table-column prop="publisher" label="发表人" width="180"></el-table-column>
                        <el-table-column prop="publishTime" label="发表时间"></el-table-column>
                        <el-table-column fixed="right" label="操作" sortable align="center" width="100">
                            <template slot-scope="scope">
                                <el-button @click="deleteDate('abstractLiterature',scope.row)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                </el-table>
            </div>
        </el-dialog>
        <el-dialog :title="dialog1.title" width="1200px" top="40px"  center :visible.sync="dialog1.isShow" :close-on-click-modal="false" :modal="false">
           <relation-literature :id="detail.id" :aid="abstract.id" :relationList='abstract.literatureList' @relationSuccess="relationSuccess"></relation-literature>
        </el-dialog>
        <el-dialog :title="dialog2.title" width="400" top="40px"  center :visible.sync="dialog2.isShow" :close-on-click-modal="false" :modal="false">
            <pe-tag :tagLiterature="tag.literature" :isRelation="true"></pe-tag>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
import {quillEditor} from 'vue-quill-editor';
import literature from './literature.vue';
import peTag from './tag.vue';
import relationLiterature from './relationLiterature.vue';
export default {
    name:'peDetail',
    components:{
        quillEditor,
        literature,
        peTag,
        relationLiterature
    },
    props:{
        detail: Object,
    },
    data(){
        return {
            activeName:'1',/**tab标签当前选中name值 */
            addType:'',/**新增或修改文献状态值，insert-新增 update-修改 */
            tableHeight:'560px',/**表格高度 */
            tabsList:[{ /**tab标签显示内容 */
                name:'1',
                label:'流行病学结论'
            },{
                name:'2',
                label:'医学经济学'
            },{
                name:'3',
                label:'医学观点'
            },{
                name:'4',
                label:'诊疗建议'
            },{
                name:'5',
                label:'副作用警戒'
            },{
                name:'6',
                label:'置换操作规范'
            },{
                name:'7',
                label:'处方指导'
            },{
                name:'8',
                label:'副反应应对'
            },{
                name:'9',
                label:'原文献'
            }],
            literatureList:[],/**原文献列表 */
            literatureContent:{},/**原文献新增内容 */
            abstractList:[],/**摘要列表 */
            pagination:{/**摘要或原文献分页 */
                pageSize:10,
                currentPage:1,
                total:0
            },
            dialog:{/**原文献新增或摘要新增修改弹框 */
                isShow:false,
                title:""
            },
            dialog1:{/**摘要新增修改关联文献弹框 */
                isShow:false,
                title:""
            },
            dialog2:{/**原文献标签关联弹框 */
                isShow:false,
                title:""
            },
            abstract:{
                id:'',/**摘要id */
                content:'',/**摘要内容*/
                abstractType:false,/**摘要显示状态 false-输入框，true-内容 */
                literatureList:[],/**文献关联原文献列表 */
                addType:'',/**文献新增或修改关联原文献类型 insert-新增，update-修改 */
                literature:{}/**摘要关联文献内容*/
            },
            tag:{
                literature:{}/**文献关联标签，文献对象 */
            },
        }
    },
    watch:{
        detail(newDetail,oldDetail){/**监听detail值得变化 */
            let self =this;
            self.activeName="1";
            self.pagination.currentPage=1;
            self.getAbstractList();
        }
    },
     created(){
        let self = this;
        self.getAbstractList();
    },
    methods:{
        getAbstractList(){/**获取文献摘要列表 */
            let self = this;
            let data ={
                type:self.activeName,
                did:self.detail.id,
                pageSize:self.pagination.pageSize,
                currentPage:self.pagination.currentPage
            }
            api.abstractList(data).then(res=>{
                self.abstractList =res.content.records;
                self.pagination.total = res.content.total;
            })
        },
        getLiteratureList(){/**获取文献列表 */
            let self = this;
            let data={
                did:self.detail.id,
                pageSize:self.pagination.pageSize,
                currentPage:self.pagination.currentPage
            }
            api.literatureList(data).then(res=>{
                if(res.content.records&&res.content.records.length>0){
                    res.content.records.forEach(element => {
                        element.level= Number(element.level).toFixed(1);
                    });
                }
                self.literatureList=res.content.records;
                self.pagination.total =  res.content.total;

            })
        },
        handleClick(tab, event){/**切换顶部tab */
            let self =this;
            if(self.activeName==="9"){
                self.getLiteratureList();
                return;
            }
            self.pagination.currentPage=1;
            self.getAbstractList();
            self.abstract = {
                id:'',/**摘要id */
                content:'',/**摘要内容*/
                abstractType:false,/**摘要显示状态 false-输入框，true-内容 */
                literatureList:[],/**文献关联原文献列表 */
                addType:'',/**文献新增或修改关联原文献类型 insert-新增，update-修改 */
                pagination:{/**关联文献分页 */
                    pageSize:10,
                    currentPage:1,
                    total:0
                }
            };
        },
        deleteDate(type,row){/**删除原文献或摘要 */
            let self = this;
            self.$confirm('确认是否删除?', '提示', {
                confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    switch(type){
                        case 'literature':
                        api.deteleLiterature(row.id).then(res=>{
                            self.getLiteratureList();
                            self.$message.success("原文献删除成功！");
                        },error=>{
                            self.$message.error("原文献删除失败！");
                        })
                        break;
                        case 'abstract':
                        api.deleteAbstract(row.id).then(res=>{
                            self.getAbstractList();
                            self.$message.success("摘要删除成功！");
                        },error=>{
                            self.$message.error("摘要删除失败！");
                        })
                        break;
                        case 'abstractLiterature':
                        api.deleteAbstractLiterature(row.relationId).then(res =>{
                            self.getAbstractLiteratureList();
                            self.$message.success("关联文献删除成功！");
                        },error=>{
                            self.$message.error("关联文献删除失败！");
                        })
                        break;
                    }
                }).catch(() => {
            });
        },
        addAbstractList(){/**摘要新增或修改表单提交 */
            let self = this;
             if (self.abstract.content=='') {
                 self.$message.error(`请输入摘要内容！`);
                 return
             }
            let data ={
                did:self.detail.id,
                type:self.activeName,
                content:self.abstract.content
            };
            self.addType=='insert'?'':data.id=self.abstract.id;
                api.addAbstract(self.addType,data).then(res=>{
                    self.$message.success(`${self.addType=='insert'?'新增':'修改'}成功`);
                    self.abstract.abstractType = true;
                    self.addType='update';
                    self.abstract.id=res.content;
            },err=>{
                self.$message.error(`${self.addType=='insert'?'新增':'修改'}失败`);
            })
        },
        isShowDialog(type,row){/**点击新增修改摘要或新增原文献 */
            let self = this;
            self.dialog.isShow = true;
            self.addType = type;
            if(self.activeName==='9'){
                 self.literatureContent = {
                        docName:'',
                        docType:'',
                        publications:'',
                        publisher:'',
                        publishTime:'',
                        level:null,
                        position:'',
                }
                return;
            };
            if(type=='update'){
                self.abstract.id = row.id;
                self.abstract.content = row.content;
                self.getAbstractLiteratureList();
            }else{
                 self.abstract.id ='';
                self.abstract.content ='';
            }

        },
         literatureDownload(row){/**下载原文献 */
            window.location.href = api.literatureDownload(row.id);
        },
        getAbstractLiteratureList(){/**获取关联文献列表 */
            let self = this;
            api.abstractInfoList(self.abstract.id).then(res=>{
                self.abstract.literatureList=res.content;
            })
        },
         changeAbstractType(){/***点击修改摘要内容 */
            this.abstract.abstractType = false;
        },
        handleSizeChange(size){/**修改关联文献分页每页显示条数 */
            let self =this;
             self.pagination.currentPage=1;
            self.pagination.pageSize=size;
            if(self.activeName==='9'){
                self.getLiteratureList();
                return
            }
            self.getAbstractList();
        },
        handleCurrentChange(current){/**切换关联文献分页页数 */
            let self =this;
            self.pagination.currentPage=current;
            if(self.activeName==='9'){
                self.getLiteratureList();
                return
            }
            self.getAbstractList();
        },
        handleSizeChange1(size){/**修改关联文献分页每页显示条数 */
            let self =this;
             self.abstract.pagination.currentPage=1;
            self.abstract.pagination.pageSize=size;
            self.getAbstractLiteratureList();
        },
        handleCurrentChange1(current){/**切换关联文献分页页数 */
            let self =this;
            self.abstract.pagination.currentPage=current;
            self.getAbstractLiteratureList();
        },
        addLiterature(activeName,isSuccess){/**新增文献 */
        if(activeName==='9'){
            if(isSuccess){
                this.dialog.isShow = false;
                 this.getLiteratureList();
            }
        }else{
            if(isSuccess){
                this.dialog1.isShow =false;
                this.getAbstractLiteratureList();
            }
        }

        },
        isShowDialog1(type,row){/**摘要点击新增关联文献 */
            let self = this;
            if(self.abstract.id==''){
                self.$message.error("请先新增摘要");
                return;
            }

            self.dialog1.isShow = true;
            self.dialog1.title=`${type=='insert'?'新增':'修改'}关联文献`;
            self.abstract.addType =type;
            if(type=='insert'){
                self.abstract.literature={
                    docName:'',
                    docType:'',
                    publications:'',
                    publisher:'',
                    publishTime:''
                }
            }else{
               self.abstract.literature = row;
               self.abstract.id =row.id;

            }
        },
        literatureAddTag(row){/**原文献关联标签 */
            let self = this;
            self.tag.literature = row;
            self.dialog2.isShow =true;
            self.dialog2.title ="关联标签详情";
        },
        relationSuccess(isSucess){
            if(isSucess){
                this.getAbstractLiteratureList();
            }
        }
    }

}
</script>
<style scoped>
    .datail{
        padding-bottom: 24px;
    }
    .dialog-plate-title{
        margin-bottom:16px;
    }
</style>

